<template>
  <div id="app" class="content">
	  <Menu />
	  <Header />
	  <Banner />
	  <Notice />
    <button v-if="!currentAccount" v-on:click="connect()">
      Connect
    </button>
	<!-- <section class="box">
	  <p class="swiper-box">1</p>
	</section> -->
   <!-- <div v-if="provider" class="welcome">Welcome {{ currentAccount }}</div> -->
	<div class="presale-content">
	  <div class="sale">
	    <img src="../assets/imgs/sale.png" />
	    <span>1</span>
	  </div>
	  <Presale v-for="item in presales" :key="item.title" :data="item" @presaleEvent="presaleEvent"></Presale>
	</div>
	<div class="partners-content">
	  <Partners v-for="item in partners" :key="item.title" :data="item"></Partners>
	</div>
    <!-- <Listings :listings="listings" @buyProperty="buyProperty"></Listings> -->
  </div>
  <div class="content">
  
  
    <!-- <section class="footer"></section> -->
  </div>
</template>

<script>
import Listings from "./Listings.vue";
import detectEthereumProvider from "@metamask/detect-provider";
import Web3 from "web3";
import Header from "./Header/index.vue"
import Menu from './Menu/index.vue'
import Banner from './Banner/index.vue'
import Notice from "./Notice/index.vue"
import Presale from './Presale/index.vue'
import Partners from './Partners/index.vue'

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  components: {
    Listings,
	Header,
	Menu,
	Banner
  },
  data() {
    return {
      count: 0,
      provider: {},
      web3: "",
      currentAccount: "",
      listings: [],
	  presales:[
	    {
	      price: 'USDT',
	      amount: '',
	    },
	    {
	      price: 'OMNI',
	      amount: '',
	    },
	    {
	      price: 'USDT',
	      amount: '',
	    },
	    {
	      price: 'OMNI',
	      amount: '',
	    }
	  ],
      contractAddress: "0x8AD0596aA5b930cEe20C6561a1bEd76979273ed8",
      abi: "",
    };
  },
  async mounted() {
    this.provider = await detectEthereumProvider();
    console.log(this.provider);
    if (this.provider) {
      this.web3 = new Web3(Web3.givenProvider);
      await this.provider
        .request({ method: "eth_accounts" })
        .then(this.handleAccountsChanged)
        .catch((err) => {
          console.error(err);
        });
      if (this.provider.chainId === "0x1") {
        //alert("This is a test app. Please do not use the main network.");
      }
    } else {
      console.log("Please install MetaMask!");
    }
	connect();
  },
  methods: {
    handleAccountsChanged: function (accounts) {
      if (accounts.length === 0) {
        console.log("Please connect to MetaMask.", accounts);
      } else if (accounts[0] !== this.currentAccount) {
        this.currentAccount = this.web3.utils.toChecksumAddress(accounts[0]);
        console.log(this.currentAccount);
        this.setAbi();
        this.getListings();
      }
    },
    setAbi: function () {
      this.abi = new this.web3.eth.Contract(
        JSON.parse(
          '[{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"_by","type":"address"},{"indexed":true,"internalType":"bytes32","name":"_property","type":"bytes32"},{"indexed":false,"internalType":"uint256","name":"_amount","type":"uint256"}],"name":"Buy","type":"event"},{"constant":true,"inputs":[{"internalType":"bytes32","name":"","type":"bytes32"}],"name":"properties","outputs":[{"internalType":"uint256","name":"minted","type":"uint256"},{"internalType":"uint256","name":"available","type":"uint256"},{"internalType":"uint256","name":"pricePerUnit","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"propertyIds","outputs":[{"internalType":"bytes32","name":"","type":"bytes32"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"internalType":"bytes32","name":"propertyId","type":"bytes32"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"buyProperty","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":true,"inputs":[{"internalType":"bytes32","name":"propertyId","type":"bytes32"},{"internalType":"address","name":"owner","type":"address"}],"name":"getPropertyForOwner","outputs":[{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"getPropertyIds","outputs":[{"internalType":"bytes32[]","name":"","type":"bytes32[]"}],"payable":false,"stateMutability":"view","type":"function"}]'
        ),
        this.web3.utils.toChecksumAddress(this.contractAddress),
        {
          from: this.currentAccount,
        }
      );
    },
    getListings: function () {
      this.abi.methods
        .getPropertyIds()
        .call()
        .then((results) => {
          this.listings = [];
          results.forEach((propertyId) => {
            this.abi.methods
              .getPropertyForOwner(propertyId, this.currentAccount)
              .call()
              .then((propertyInformation) => {
                this.listings.push({
                  id: propertyId,
                  owned: propertyInformation[0],
                  totalMinted: propertyInformation[1],
                  available: propertyInformation[2],
                  unitPrice: propertyInformation[3],
                });
              });
          });
        });
    },
    buyProperty(propertyInformation) {
      console.log(
        "buying property " +
          propertyInformation.id +
          " for " +
          propertyInformation.unitPrice
      );

      this.abi.methods
        .buyProperty(propertyInformation.id, 1)
        .send({ value: propertyInformation.unitPrice })
        .on("error", function (error) {
          console.error(error);
        })
        .on("transactionHash", function (transactionHash) {
          console.log("transaction hash " + transactionHash);
        })
        .on("receipt", function (receipt) {
          console.log("receipt", receipt); // contains the new contract address
        })
        .on("confirmation", function (confirmationNumber, receipt) {
          console.log("confirmation", confirmationNumber, receipt);
        })
        .then((result) => {
          console.log("result", result);
          this.getListings();
        });
    },
    connect: function () {
      this.provider
        .request({ method: "eth_requestAccounts" })
        .then(this.handleAccountsChanged)
        .catch((err) => {
          if (err.code === 4001) {
            console.log("Please connect to MetaMask.");
          } else {
            console.error(err);
          }
        });
      console.log("connected with account " + this.currentAccount);
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 0 0 1rem;
  .box {
    position: relative;
  }
  .swiper-box {
    padding: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .presale-content {
    margin: 0 0.9375rem 0.9375rem;
    padding: 0 0.5rem;
    border: 1px solid rgb(68, 78, 104);
    background: linear-gradient(rgba(71, 71, 107, 0.8) 0%, rgba(50, 55, 75, 0.8) 33.81%, rgba(1, 1, 1, 0.8) 71.33%);
    border-radius: 1rem;
    position: relative;
    .presale {
      margin: 1rem 0;
    }
    .sale {
      padding: 1rem 0 0rem;
      img {
        vertical-align: middle;
        width: 2rem;
      }
      span {
        vertical-align: middle;
        font-size: 1rem;
        margin-left: 0.6rem;
      }
    }
  }
  .partners-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 0 0.9375rem 0.9375rem;
  }
}
</style>
